<template>
  <div class="event-manage">
    <h2>事件管理</h2>
    <el-button type="primary" @click="showAdd = true">新增事件</el-button>
    <el-table :data="eventList" style="width: 100%; margin-top: 20px">
      <el-table-column prop="事件编号" label="事件编号" />
      <el-table-column prop="事件类型" label="类型" />
      <el-table-column prop="事件等级" label="等级" />
      <el-table-column prop="发生时间" label="时间" />
      <el-table-column prop="发生地点" label="地点" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="editEvent(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteEvent(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showAdd" title="新增事件">
      <el-form :model="addForm">
        <el-form-item label="事件编号"
          ><el-input v-model="addForm.事件编号"
        /></el-form-item>
        <el-form-item label="事件类型"
          ><el-input v-model="addForm.事件类型"
        /></el-form-item>
        <el-form-item label="事件等级"
          ><el-input v-model="addForm.事件等级"
        /></el-form-item>
        <el-form-item label="发生时间"
          ><el-date-picker v-model="addForm.发生时间" type="datetime"
        /></el-form-item>
        <el-form-item label="发生地点"
          ><el-input v-model="addForm.发生地点"
        /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '../utils/request'
import { ElMessage } from 'element-plus'

const eventList = ref([])
const showAdd = ref(false)
const addForm = ref({
  事件编号: '',
  事件类型: '',
  事件等级: '',
  发生时间: '',
  发生地点: '',
})

const fetchEvents = async () => {
  const res = await request.get('/events')
  if (res.code === 200) eventList.value = res.data
}
onMounted(fetchEvents)

const submitAdd = async () => {
  const res = await request.post('/events', addForm.value)
  if (res.code === 200) {
    ElMessage.success('新增成功')
    showAdd.value = false
    fetchEvents()
  }
}
const deleteEvent = async (row) => {
  const res = await request.delete(`/events/${row.id}`)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    fetchEvents()
  }
}
const editEvent = (row) => {
  ElMessage.info('请在实际项目中实现编辑功能')
}
</script>

<style scoped>
.event-manage {
  max-width: 900px;
  margin: 0 auto;
}
</style>
